<template>
	<el-dialog title="试卷预览" :visible.sync="visible" top="0" width="800px" custom-class="paper_detail_dialog">
		<el-descriptions v-bind="descriptionsConfig" v-loading="loading">
			<el-descriptions-item label="试卷标题" :span="2">{{ paperData.name }}</el-descriptions-item>
			<el-descriptions-item label="试卷状态">
				<el-tag size="small" type="success" v-if="paperData.status === '1'">正常</el-tag>
				<el-tag size="small" type="danger" v-if="paperData.status === '2'">禁用</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="试卷总分">{{ paperData.totalScore }} 分</el-descriptions-item>
			<el-descriptions-item label="管理权限">
				<font v-if="paperData.permission === '1'">完全私有</font>
				<font v-if="paperData.permission === '2'">只读共享</font>
			</el-descriptions-item>
			<el-descriptions-item label="试卷分类">{{ paperData.sysClassify?.name }}</el-descriptions-item>
			<el-descriptions-item label="章节设置" :span="3" :contentStyle="{ padding: 0 }">
				<el-card v-for="(item, index) in paperChapters" :key="index" shadow="never">
					<template slot="header">
						<h4>章节名称：{{ item.title }}</h4>
						<p>章节描述：{{ item.des }}</p>
					</template>
					<template v-if="paperData.paperType === '1'">
						<div class="subject_item" v-for="(n, i) in item.testSubjectVO" :index="i">
							<em>{{ n.score }}分</em>
							<h4 v-html="n.testSubjects?.title"></h4>
							<el-button type="text" icon="el-icon-view" @click="handleLookSubject(n)"></el-button>
						</div>
					</template>
					<template v-if="paperData.paperType === '2'">
						<el-row :gutter="16" class="body" v-for="(n, i) in item.testSubjectVO" :index="i">
							<el-col :span="24">
								<strong>题库：</strong>
								{{ n.ruleVo.testQuestionBankList | subjectBankFilter }}
							</el-col>
							<el-col :span="6">
								<strong>题型：</strong>
								{{ n.ruleVo.subjectType | subjectTypeFilter }}
							</el-col>
							<el-col :span="6">
								<strong>难度：</strong>
								{{ n.ruleVo.subjectDifficulty | subjectDifficultyFilter }}
							</el-col>
							<el-col :span="6">
								<strong>题目数量：</strong>
								{{ n.ruleVo.subjectNum }} 题
							</el-col>
							<el-col :span="6">
								<strong>单题分值：</strong>
								{{ n.ruleVo.score }} 分
							</el-col>
						</el-row>
					</template>
				</el-card>
			</el-descriptions-item>
		</el-descriptions>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="visible = false">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import lodash from 'lodash';
import { queryPapers } from '@/api/exam/testPaper';
import { subjectType, subjectDifficulty } from '@/utils/subjectData';
export default {
	props: {
		value: { type: Boolean, default: false },
		paperId: { type: String, default: '' }
	},
	data() {
		return {
			visible: this.value,
			descriptionsConfig: {
				column: 3,
				border: true,
				size: 'medium',
				class: 'paper_descriptions',
				contentStyle: { width: '200px' },
				labelStyle: { width: '90px', lineHeight: '24px' }
			},
			loading: false,
			paperData: {}
		};
	},
	computed: {
		paperChapters() {
			return this.paperData.testPaperChapterList || [];
		}
	},
	filters: {
		subjectBankFilter(arr) {
			let dataArr = !!arr && lodash.isArray(arr) ? arr : [];
			return lodash.map(dataArr, 'name').join('、');
		},
		subjectTypeFilter(val) {
			let info = subjectType.find((n) => n.value === val);
			return !info ? '' : info.label;
		},
		subjectDifficultyFilter(val) {
			let info = subjectDifficulty.find((n) => n.value === val);
			return !info ? '' : info.label;
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.loading = true;
			this.getPaperDetail();
		}
	},
	methods: {
		async getPaperDetail() {
			let result = await queryPapers(this.paperId).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.paperData = this.$detailData(result.data);
				console.log(this.paperData);
			}
		},

		handleLookSubject(data) {
			this.$bus.$emit('lookSubject', data.id);
		}
	}
};
</script>
<style lang="scss">
.paper_detail_dialog .el-dialog__body {
	flex-direction: column;
}
</style>
<style lang="scss" scoped>
.paper_descriptions::v-deep {
	flex: 1;
	.el-card {
		border: none;
		border-radius: 0;
	}
	.el-card__header {
		padding: 0;
		h4,
		p {
			padding: 10px;
			color: #303133;
			line-height: 1;
		}
		h4 {
			background-color: #ebeef5;
		}
		p {
			background-color: #f2f6fc;
		}
	}
	.el-card__body {
		padding: 10px;
	}
	.subject_item {
		display: flex;
		align-items: center;
		border: solid 1px #ebeef5;
		border-radius: 4px;
		padding: 6px 10px;
		margin-top: 10px;
		overflow: hidden;
		color: #606266;
		&:first-child {
			margin-top: 0;
		}
		h4 {
			flex: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1; /* 限制为3行 */
			font-weight: normal;
			overflow: hidden;
			line-height: 24px;
			margin: 0 10px;
			height: 24px;
			* {
				display: inline;
			}
		}
		em {
			width: 48px;
			line-height: 1;
			flex-shrink: 0;
			font-style: normal;
		}
		.el-button {
			flex-shrink: 0;
			padding: 5px 0;
		}
	}
	.el-row.body {
		color: #606266;
		line-height: 24px;
		padding: 0 5px;
		.el-col {
			margin: 5px 0;
		}
	}
}
</style>
